<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'station.add'">创建
    </el-button>
    <div class="filter-container">

      <el-select v-model="query.plant_id" class="filter-item" placeholder="请选择工厂" clearable filterable>
        <el-option v-for="i in plantOptions " :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select v-model="query.group_id" class="filter-item" placeholder="请选择工序" clearable filterable>
        <el-option v-for="i in groupOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select v-model="query.line_id" class="filter-item" placeholder="请选择线体" clearable filterable>
        <el-option v-for="i in lineOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select v-model="query.is_enable" class="filter-item" placeholder="是否开启" clearable filterable>
        <el-option v-for="i in enableOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 300px" placeholder="输入编号或名称查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.query"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading"
        v-permission="'station.export'">导出</el-button>

    </div>

    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template #content="{key,row}">
        <div v-if="key=='is_enable'">
          <span class="text-label" :class="statusClass[row[key]]">{{ status[row[key]] }}</span>
        </div>
        <span v-else>{{ row[key] }}</span>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-blue" @click.prevent="editItem(v.row,v.$index)" v-permission="'station.edit'">编辑</a>
        <span>&nbsp;</span>
        <span>&nbsp;</span>
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)" v-permission="'station.delete'">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import _ from 'lodash'
export default {
  // 工位管理
  name: 'station',
  mixins: [commonMixin],
  data() {
    return {
      api: this.$api.station,
      apiList: this.$api.station + 'getlistbypage',
      apiCreate: this.$api.station + 'add',
      apiEdit: this.$api.station + 'update',
      name: '工位管理',
      status: { true: '已启用', false: '已禁用' },
      statusClass: { false: 'bg-gray', true: 'bg-green' },
      columns: [
        { title: '工位编号', key: 'code' },
        { title: '工位名称', key: 'name' },
        { title: '工厂代码', key: 'plant_code' },
        { title: '工厂名称', key: 'plant_name' },
        { title: '工序', key: 'group_name' },
        { title: '线体', key: 'line_name' },
        { title: '是否开启', key: 'is_enable' },
        { title: 'agv地址点', key: 'agv_address_id' },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user' },
        { title: '最后修改', key: 'modify_time' },
      ],
      fields: [
        {
          title: '工位编号',
          key: 'code',
          required: true,
          span: 12,
        },
        {
          title: '工位名称',
          key: 'name',
          required: true,
          span: 12,
        },
        {
          title: '工厂',
          key: 'plant_id',
          required: true,
          options: [],
          props: {
            clearable: true,
            filterable: true,
          },
          name: 'select',
          span: 12,
        },
        {
          title: '工序',
          key: 'group_id',
          required: true,
          options: [],
          props: {
            clearable: true,
            filterable: true,
          },
          name: 'select',
          span: 12,
        },
        {
          title: '线别',
          key: 'line_id',
          required: true,
          options: [],
          props: {
            clearable: true,
            filterable: true,
          },
          name: 'select',
          span: 12,
        },
        {
          title: 'agv地址点',
          key: 'agv_address_id',
          required: true,
          span: 12,
        },
        {
          title: '是否开启',
          key: 'is_enable',
          required: true,
          name: 'switch',
        },

        {
          title: '备注',
          key: 'remark',
          name: 'textarea',
        },
      ],
      query: {
        is_enable: null,
        query: null,
        plant_id: null,
        group_id: null,
        line_id: null,
      },
      tableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: false,
      },
      formProps: {
        dialogWidth: '80%',
        labelWidth: '120px',
      },
      initData: {},

      enableOptions: [
        { label: '开启', value: true },
        { label: '关闭', value: false },
      ],
      plantOptions: [], // /api/MasterData/plant/getlist 工厂list
      groupOptions: [], // /api/MasterData/group/getlistbypage 工序list
      lineOptions: [], // /api/MasterData/line/getlistbypage 工序list
      switchLoading: false,
    }
  },
  watch: {
    'data.plant_id': {
      deep: true,
      handler(v) {
        this.getLineOptions()
      },
    },
  },
  created: function () {
    this.getList()
    this.init()
  },
  methods: {
    formatQuery(data) {
      let tmp = _.cloneDeep(data)
      if (tmp.is_enable == '') tmp.is_enable = null
      return tmp
    },
    getList() {
      this.pageLoading = true
      let url = this.apiList
      this.$request(url, this.formatQuery(this.query), 'post')
        .then((r) => {
          this.list = this.formatList(r.list)
          this.total = r.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    getLineOptions() {
      const plant_id = this.data.plant_id
      console.log(plant_id)
      if (!plant_id) {
        this.setFieldOptions('line_id', [])
        return
      }
      this.$request(this.$api.line + 'getlistbypage', { size: 999, page: 1, plant_id }).then((r) => {
        let list = this.arrayOptions(r.list, 'id', 'line_name')
        let tmp = this.getFieldConfig('line_id')
        tmp.options = list
      })
    },
    changeSwitch(row) {
      if (this.switchLoading) return
      this.switchLoading = true
      this.$confirm(`确定要${row.is_enable ? '开启' : '关闭'}？`)
        .then(() => {
          let url = this.api + 'updateenablebyid'
          this.$request(url, {
            id: row.id,
          })
            .then((r) => {
              this.$message.success('操作成功')
              this.switchLoading = false
              this.getList()
              this.data.is_enable = row.is_enable ? false : true
            })
            .finally(() => {
              this.switchLoading = false
            })
        })
        .catch(() => {
          this.switchLoading = false
        })
    },
    init() {
      this.$request(this.$api.plant + 'getlist', { size: 999, page: 1 }).then((r) => {
        let list = this.arrayOptions(r.list, 'id', ['plant_code', 'plant_name'])
        let tmp = this.getFieldConfig('plant_id')
        tmp.options = list
        this.plantOptions = list
      })
      this.$request(this.$api.group + 'getlistbypage', { size: 999, page: 1 }).then((r) => {
        let list = this.arrayOptions(r.list, 'id', 'group_name')
        let tmp = this.getFieldConfig('group_id')
        tmp.options = list
        this.groupOptions = list
      })
      this.$request(this.$api.line + 'getlistbypage', { size: 999, page: 1 }).then((r) => {
        let list = this.arrayOptions(r.list, 'id', 'line_name')
        this.lineOptions = list
      })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
